<template>
<el-main>
 <div class="head" style="text-align:center">
   <el-text type="primary" size="small" style="font-weight:bold">STEP 1/4</el-text><br>
   <el-text size="large" style="font-weight:bold">Valid your phone</el-text>
  </div>
  <div class="middle">
   <div class="phoneNumber">
      <el-text size="small">Mobile Number</el-text>
      <div class="flex flex-wrap gap-4 items-center">
          <el-select
            v-model="value"
            placeholder="+1"
            size="large"
            style="width:70px"

          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

      <el-input class="phone" v-model="input" style="width: 298px" size="large" placeholder="345 567-23-56" />

      </div>
     </div>
    <div class="code">
     <el-text size="small">Code Form SMS</el-text>
     <div class="mb-4">
         <el-input class="t1 border" v-model="text1" style="width: 50px" placeholder="" />
         <el-input class="t2 border" v-model="text2" style="width: 50px" placeholder="" />
         <el-input class="t3 border" v-model="text3" style="width: 50px" placeholder="" />
         <el-input class="t4 border" v-model="text4" style="width: 50px" placeholder="" />
     </div>
    </div>
    <div class="Alert">
      <div class="flexs">
        <div><el-icon size="large" style="vertical-align: sub;"><WarningFilled /></el-icon></div>
        <div>SMS was sent to your number {{value}} {{input}}It will be valid for 01:25</div>
      </div>
    </div>
    <div class="Email">
     <el-text size="small">Email Address</el-text><br>
     <el-input v-model="email" style="width: 370px" class="border" placeholder="youremail@gmail.com" size="large"/>
    </div>
    <div class="Password">
     <el-text size="small">Create Password</el-text><br>
     <el-input
        class="border"
         v-model="password"
         style="width: 370px"
         size="large"
         type="password"
         placeholder=""
         show-password
       />
    </div>
  </div>
</el-main>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { WarningFilled } from '@element-plus/icons-vue'
const value = ref('+1')

const options = [
  {
    value: '+1',
    label: '+1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

const input = ref('')

const text1 = ref('')
const text2 = ref('')
const text3 = ref('')
const text4 = ref('')
const email = ref('')
const password = ref('')

import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

</script>
<style scoped>
.phoneNumber .el-select :deep(.el-select__wrapper) {
  border-radius: 10px !important;
}
.phone.el-input :deep(.el-input__wrapper) {
  border-radius: 10px !important;
  margin-left:20px;
}
.border.el-input :deep(.el-input__wrapper) {
  border-radius: 10px !important;
}

.t2{
  margin-left:20px;
}
.t3{
  margin-left:20px;
}
.t4{
  margin-left:20px;
}
.Alert{
  height:80px;
  width:380px;
  padding:20px;
  text-align:left;
  
  background-color:#ecf5ff;
  border-radius: 10px;
}
.flexs {
  display: flex;
  align-items: flex-start;
  color:#409EFF
}
 .middle{
 margin-left:380px;
 }
 .phoneNumber{
 margin-top:35px;
 }
 .code{
 margin-top:25px;
 }
 .Alert{
 margin-top:35px;
 }
 .Email{
 margin-top:25px;
 }
 .Password{
 margin-top:25px;
 }
</style>
}